
import { ref, createApp } from "vue";
import TradingTable from "@/content-scripts/components/table/TradingTable.vue";
import { processingColumns, onlineTransactionsColumns, myHoldingsColumns } from "@/content-scripts/components/table/columns/alphaColumns.js";
import Antd from "ant-design-vue";
import { get } from "@/http/http";

let alphaApp = null

export async function createTableBottomAlpha(params = {}) {
    const container = document.querySelector("#bottom_group > .bottom_box > .table-scroll-window > .tr-table__wrapper");
    // const table = container.querySelector('.tr-trade__table')
    // table.style.display = 'none'
    // 请求接口，获取数据
    // params是修改的数据
    console.log(params, 'parssssss');

    let tableSource = ref([])
    let tableColumns = ref([])
    if (params.firstStageTabs.includes('全网成交')) {
        const dataSource = await get('/alpha/commission/online')
        console.log(dataSource, 'dataSource');
        tableSource = dataSource.data
        tableColumns = onlineTransactionsColumns

    }
    if (params.firstStageTabs.includes('处理中') || params.firstStageTabs.includes('历史记录')) {
        const dataSource = await get('/alpha/commission/process')
        console.log(dataSource, 'dataSource');
        tableSource = dataSource.data
        tableColumns = processingColumns
    }
    if (params.firstStageTabs.includes('我的持仓')) {
        const dataSource = await get('/alpha/commission/holding')
        console.log(dataSource, 'dataSource');
        tableSource = dataSource.data
        tableColumns = myHoldingsColumns
    }

    console.log(params);
    console.log(container, "contaainer");


    if (!container) {
        console.log('未找到#bottom_group > .bottom_box > .table-scroll-window > .tr-table__wrapper，表格区域');

        return
    }

    const existingOverlay = container.querySelector(".my-alpha-table-overlay");
    if (existingOverlay) {
        existingOverlay.remove();
    }

    const overlay = document.createElement("div");
    overlay.setAttribute("class", "my-alpha-table-overlay");
    overlay.setAttribute(
        "style",
        "position: absolute;\n" +
        " left: 0;\n" +
        " top: 0;\n" +
        " width: 100%;\n" +
        " height: 100%;\n" +
        " z-index: 35;\n"
    );

    const tableStyle = {
        // fontSize: "12px",
        color: "#8e949e",
        // background: "#F8F9FB",
    };

    // 挂载元素
    const appContainer = document.createElement("div");

    alphaApp = createApp(TradingTable);
    alphaApp.provide("tableSource", tableSource);
    alphaApp.provide("tableColumns", tableColumns);
    alphaApp.provide("tableStyle", tableStyle);
    alphaApp.use(Antd);
    alphaApp.mount(appContainer);
    console.log("TradingTable");

    container.style.position = "relative";
    overlay.appendChild(appContainer);
    container.appendChild(overlay);
}